<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UEStudio官网</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/font.css">
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;

    }
    body{
        font-family: "Cuis";
    }
    .swiper-container {
        width: 100%;
        height: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 100%;
        height: 100%;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .slide1{
        position: relative;
    }
    .slide1 .header_logo{
        width: 500px;
        height: 360px;
        position: absolute;
        top: 50px;
    }
    .slide1 .logo{
        width: 100%;
        height: 100%;
        background: url("img/logo.png");
        background-size: cover;
    }
    .header_span{
        position: absolute;
        top: 480px;
    }
    .slide2{
        position: relative;
        overflow: hidden;
    }
    .slide2_content_left{
        width: 900px;
        height: 130%;
        position:absolute;
        /* left: -300px; */
        left: -300px;
        background: gray;
        border: 1px solid gray;
        border-radius: 50%;
        top: -50px;
    }
    .slide2_content_lore_title{
        position:absolute;
        right: 350px;
        top: 130px;
    }
    .slide2_content_lore_msg{
        position:absolute;
        top: 220px;
        height: 300px;
    }
    .slide2_content_lore_msg p{
        width: 400px;
        line-height: 30px;
        text-indent: 5em;
    }
    .slide3{
        position: relative;
    }
    .slide3_content_title{
        position: absolute;
        top: 30px;
    }
    .slide3_content_msg{
        width: 100%;
        height: 500px;
        text-align: center;
        margin: 0 auto;
    }
    .slide3_content_list{
        width: 50%;
        height: 300px;
        float: left;
        margin-left: 100px;
        margin-top: 100px;
    }
    .slide3_content_circular{
        width: 100%;
        height: 200px;
        border: 1px solid black;
        border-radius: 50%;
        margin-bottom: 30px;
    }
    .slide3_content_demo{
        width: 300px;
        margin-left: -30px;
    }
    .slide3_content_demo p{
        width: 100%;
        line-height: 30px;
    }
    .slide4{
        position: relative;
        font-size: 30px;
    }
    .slide4_title{
        position: absolute;
        top: 10px;
    }
    .slide4_content{
        width: 50%;
        height: 500px;
        padding-top: 50px;
        box-sizing: border-box;
        margin-top: -100px;
    }
    .left{
        background: #00C3FF;
    }
    .right{
        background: #FFA300;
    }
    .slide4_content_title{
        margin-bottom: 200px;
        color: white;
    }
    .slide4_content_copy{
        position: absolute;
        height: 100px;
        width: 100%;
        background: #777777;
        bottom: 0px;
        padding-top: 30px;
        box-sizing: border-box;
    }
    .slide4_content_button{
        width: 120px;
        height: 50px;
        background: white;
        border-radius: 10px;
        text-align: center;
        line-height: 50px;
        font-size: 25px;
margin:0 auto;
margin-bottom: 20px;
    }
    .slide4_content_button:hover{
        cursor: pointer;
    }
    </style>
</head>
<body>
    <main>
     <!-- Swiper -->
     <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide slide1">
                <div class="header_logo">
                    <div class="logo"></div>
                </div>
                <div class="header_span">
                    <div class="header_content">
                        <h1 style="color: #697F93;font-weight: normal;"><span style="margin-right: 10px;">-</span><span style="margin-right: 30px;">发现未知</span><span style="margin-right: 10px;">创新未知</span><span>-</span></h1>
                    </div>
                </div>
            </div>
            <div class="swiper-slide slide2">
                <div class="slide2_content_left">
                        <div class="slide2_content_img"></div>
                </div>
                <div class="slide2_content_right">
                    <div class="slide2_content_svg">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1365 500"><defs><style>.cls-1{opacity:0.8;fill:url(#未命名的渐变_249);}</style><linearGradient id="未命名的渐变_249" x1="341.25" y1="737.93" x2="1185.85" y2="-106.67" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#883fff"/><stop offset="1" stop-color="#ff6f3f"/></linearGradient></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M1317,28.68c-22-5.64-49.8,53.61-86.27,110.67-21.67,33.92-46.39,67.06-74.73,85.33-73,47.08-174.64-22.15-287.14-142q-6.9-7.35-13.86-15c-118-129-166-37-211.09-20.29C506.9,257.67,269.69,396.68,0,396.68H1365V148.43C1361.05,117.1,1345.8,36.09,1317,28.68Z"/></g></g></svg>
                    </div>
                    <div class="slide2_content_lore">
                        <div class="slide2_content_lore_title">
                            <h2 style="font-weight: none;font-size: 35px;"><span style="margin-right:30px">—</span>介绍<span style="margin-left:30px">—</span></h2>
                        </div>
                        <div class="slide2_content_lore_msg">
                            <p style="text-indent: 7em">工作室xxxxxxxxxxxxx</p>
                            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide slide3">
                <div class="slide3_content_title">
                    <h3 style="font-size: 30px;">我们的项目</h3>
                </div>
                <div class="slide3_content_msg">
                    <div class="slide3_content_list">
                        <div class="slide3_content_circular"></div>
                        <div class="slide3_content_demo">
                            <p>GuGuGu-全自动鸽子散养系统</p>
                            <p>对项目一句话的介绍</p>
                        </div>
                    </div>
                </div>
                <div class="slide3_content_msg">
                    <div class="slide3_content_list">
                        <div class="slide3_content_circular"></div>
                        <div class="slide3_content_demo">
                            <p>GuGuGu-全自动鸽子散养系统</p>
                            <p>对项目一句话的介绍</p>
                        </div>
                    </div>
                </div>
                <div class="slide3_content_msg">
                    <div class="slide3_content_list">
                        <div class="slide3_content_circular"></div>
                        <div class="slide3_content_demo">
                            <p>GuGuGu-全自动鸽子散养系统</p>
                            <p>对项目一句话的介绍</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide slide4">
                <div class="slide4_title">
                    <h5 style="color: white;font-size: 40px;">加入我们</h5>
                </div>
                <div class="slide4_content left">
                    <div class="slide4_content_title">
                        <p style="font-size: 40px;">外群</p>
                        <p>日常&交流</p>
                    </div>
                    <div class="slide4_content_button">
                        <p>点击加入</p>
                    </div>
                    <div class="slide4_content_qqGroup">
                        <p style="color: black;font-size: 20px;">(跳转到QQ加群连接)</p>
                    </div>
                </div>
                <div class="slide4_content right">
                    <div class="slide4_content_title" style="margin-bottom: 232px;">
                        <p style="font-size: 40px;">内群</p>
                    </div>
                    <div class="slide4_content_button">
                        <p>点击加入</p>
                    </div>
                    <div class="slide4_content_qqGroup">
                        <p style="color: black;font-size: 20px;">(跳转到申请界面)</p>
                    </div>
                </div>
                <div class="slide4_content_copy">
                    <p style="font-size: 20px;color: white;">备案号：&copf;XXXXX</p>
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</main>
    
    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
    });
    </script>
</body>
</html>